import G6 from "@antv/g6";

export function flow(v,id){
    const tooltip = new G6.Tooltip({
        offsetX: 30,
        offsetY: 10,
        getContent(e) {
          const outDiv = document.createElement("div");
          // outDiv.style.width = "auto";
          outDiv.style.color = "green";
          outDiv.innerHTML = `
            <div style="min-width:50px;font-size: 12px;text-align: center;">
                <p style="">节点名称：${
                  e.item.getModel().label || e.item.getModel().name
                }</p>
            </div>`;
          return outDiv;
        },
        itemTypes: ["node"],
      });
      // 配置样式（线和节点）
      const typeConfigs = {
        type1: {
          type: "circle",
          size: 10,
          style: {
            fill: "#5B8FF9",
          },
        },
        type2: {
          type: "rect",
          size: 10,
          style: {
            fill: "#5AD8A6",
          },
        },
        type3: {
          type: "rect",
          size: 10,
          style: {
            fill: "#5D7092",
          },
        },
        eType1: {
          type: "line",
          style: {
            width: 20,
            stroke: "#F6BD16",
          },
        },
        eType2: {
          type: "line",
        },
        eType3: {
          type: "line",
          style: {
            width: 25,
            stroke: "#6F5EF9",
          },
        },
      };
      const legendData = {
        nodes: [
          {
            id: "type1",
            label: "开始节点",
            order: 0,
            type: "circle",
            size: 15,
            ...typeConfigs["type1"],
          },
          {
            id: "type2",
            label: "流转节点",
            order: 0,
            ...typeConfigs["type2"],
          },
          {
            id: "type3",
            label: "结束节点",
            order: 2,
            ...typeConfigs["type3"],
          },
        ],
        edges: [
          {
            id: "eType1",
            label: "经过路径",
            order: 2,
            ...typeConfigs["eType1"],
          },
          {
            id: "eType2",
            label: "未经过路径",
            ...typeConfigs["eType2"],
          },
          {
            id: "eType3",
            label: "结束",
            ...typeConfigs["eType3"],
          },
        ],
      };
      // 遍历数据，给不同类型的节点和线配置不同的形状和颜色
      v.chartData.nodes.forEach((node) => {
        if (!node.legendType) return;
        node = Object.assign(node, {
          type: typeConfigs[node.legendType].type,
          style: typeConfigs[node.legendType].style,
        });
        //如果是圆形，设置默认大小
        if (node.type == "circle") {
          node.size = 50;
        }
      });
      v.chartData.edges.forEach((edge) => {
        if (!edge.legendType) return;
        const config = typeConfigs[edge.legendType];
        edge = Object.assign(edge, { ...config });
      });

      const legend = new G6.Legend({
        data: legendData,
        align: "center",
        layout: "horizontal", // vertical
        position: "top-left",
        vertiSep: 12,
        horiSep: 24,
        offsetY: -24,
        padding: [4, 16, 8, 16],
        containerStyle: {
          fill: "#ccc",
          lineWidth: 1,
        },
        title: "试验流程",
        titleConfig: {
          position: "center",
          offsetX: 0,
          offsetY: 12,
        },
        filter: {
          enable: true,
          multiple: true,
          trigger: "click",
          graphActiveState: "activeByLegend",
          graphInactiveState: "inactiveByLegend",
          filterFunctions: {
            type1: (d) => {
              if (d.legendType === "type1") return true;
              return false;
            },
            type2: (d) => {
              if (d.legendType === "type2") return true;
              return false;
            },
            type3: (d) => {
              if (d.legendType === "type3") return true;
              return false;
            },
            eType1: (d) => {
              if (d.legendType === "eType1") return true;
              return false;
            },
            eType2: (d) => {
              if (d.legendType === "eType2") return true;
              return false;
            },
            eType3: (d) => {
              if (d.legendType === "eType3") return true;
              return false;
            },
          },
        },
      });

      G6.registerNode(
        "sql",
        {
          drawShape(cfg, group) {
            const rect = group.addShape("rect", {
              attrs: {
                x: -75,
                y: -25,
                width: 100,
                height: 50,
                radius: 10,
                stroke: "#5B8FF9",
                fill: "#C6E5FF",
                lineWidth: 3,
              },
              name: "rect-shape",
            });
            if (cfg.name) {
              group.addShape("text", {
                attrs: {
                  text: cfg.name,
                  x: -22,
                  y: 0,
                  fill: "#00287E",
                  fontSize: 12,
                  textAlign: "center",
                  textBaseline: "middle",
                  fontWeight: "bold",
                },
                name: "text-shape",
              });
            }
            return rect;
          },
        },
        "single-node"
      );
      const mountNode = document.getElementById(id);
      const width = mountNode.scrollWidth;

      const height = mountNode.scrollHeight || 750;
      // 流程图宽、高、容器id、数据
      const graph = new G6.Graph({
        container: "myFlow",
        width: width,
        height: height,
        plugins: [tooltip, legend],
        // defaultNode: {
        //   type: "sql",
        // },

        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
          activeByLegend: {
            lineWidth: 10,
            strokeOpacity: 0.5,
          },
          inactiveByLegend: {
            opacity: 0.5,
          },
        },
        edgeStateStyles: {
          activeByLegend: {
            lineWidth: 3,
          },
          inactiveByLegend: {
            opacity: 0.5,
          },
        },
        // modes: {
        //   default: ["click-select"],
        // },
        modes: {
          default: ["drag-canvas", "drag-node", "click-select", "zoom-canvas"],
        },
        layout: {
          type: "dagre",
          rankdir: "TB",
          nodesep: 100,
          // align: "UR",
          controlPoints: true,
          //节点间距
          nodesepFunc: (d) => {
            if (d.id == "2") {
              return 10;
            }
            return 1;
          },
          // 上下间距
          ranksepFunc: (d) => {
            if (d.id == "1") {
              return 10;
            }
            return 1;
          },
        },
        defaultNode: {
          // size: ,
          anchorPoints: [
            [0.5, 0],
            [0.5, 1],
          ],
          type: "rect",
          style: {
            lineWidth: 1,
            stroke: "#5B8FF9",
            fill: "#C6E5FF",
          },
          labelCfg: {
            // position: "bottom", //文本位置，默认
            // offset: 5, //偏移量
            //文字样式
            style: {
              fill: "orange",
              // stroke: "#666",
              fontSize: 12,
            },
          },
        },
        defaultEdge: {
          type: "polyline",
          // autoRotate: true,
          size: 1,
          // stroke: "#409EFF", // 边描边颜色
          style: {
            stroke: "#409EFF", // 边描边颜色
            endArrow: {
              // path: "M 0,0 L 8,4 L 8,-4 Z",
              // fill: "#e2e2e2",
              path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              d: 0,
              fill: "#409EFF",
              opacity: 0.5,
              lineWidth: 1,
            },
            radius: 20,
          },
        },
        //边的样式配置
        // defaultEdge: {
        //   type: "polyline",
        //   // 边样式配置
        //   style: {
        //     stroke: "#409EFF", // 边描边颜色
        //     endArrow: {
        //       path: G6.Arrow.triangle(5, 5, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
        //       d: 0,
        //       fill: "#409EFF",
        //       opacity: 0.5,
        //       lineWidth: 1,
        //     },
        //   },
        //   labelCfg: {
        //     position: "center",
        //   },
        // },
        fitView: true,
      });
      //读取数据
      graph.data(v.chartData);
      // 渲染图
      graph.render();

      // graph.fitView();
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!mountNode || !mountNode.scrollWidth || !mountNode.scrollHeight)
            return;
          graph.changeSize(mountNode.scrollWidth, mountNode.scrollHeight);
        };
}